﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>
	<link href="task1.css" rel="stylesheet" />
	<script src="jquery-1.9.0.js"></script>
	<script>
		$(function onDocumentReady() {
			$("header nav > ul > li > a").on("click", function onNavItemClick(e) {
				if (!$(this).parent().hasClass("selected")) {
					$("header nav ul li.selected").removeClass("selected");
					$(this).parent().addClass("selected");
				}

				if (e.preventDefaults) {
					e.preventDefaults();
				}
				return false;
			});
		});
	</script>
</head>
<body>
	<div id="wrapper">
		<header>
			<nav>
				<ul>
					<li class="selected">
						<a href="#">Nav item #1 </a>
						<ul>
							<li>
								<a href="#">Sub nav item #1.1 </a>
								<ul>
									<li>
										<a href="#">Dropdown Item #1.1.1</a>
									</li>
									<li>
										<a href="#">Dropdown Item #1.1.2</a>
									</li>
									<li>
										<a href="#">Dropdown Item #1.1.3</a>
									</li>
									<li>
										<a href="#">Dropdown Item #1.1.4</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">Sub nav item #1.2 </a>	 
								<ul>
									<li>
										<a href="#">Dropdown Item #1.2.1</a>
									</li>
									<li>
										<a href="#">Dropdown Item #1.2.2</a>
									</li>
									<li>
										<a href="#">Dropdown Item #1.2.3</a>
									</li>
									<li>
										<a href="#">Dropdown Item #1.2.4</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">Sub nav item #1.3 </a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Nav item #2 </a>
					</li>
					<li>
						<a href="#">Nav item #3 </a>
					</li>
					<li>
						<a href="#">Nav item #4 </a>
						<ul>
							<li>
								<a href="#">Sub nav item #4.1 </a>	
								<ul>
									<li>
										<a href="#">Dropdown Item #4.1.1</a>
									</li>
									<li>
										<a href="#">Dropdown Item #4.1.2</a>
									</li>
									<li>
										<a href="#">Dropdown Item #4.1.3</a>
									</li>
									<li>
										<a href="#">Dropdown Item #4.1.4</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">Sub nav item #4.2 </a>
							</li>
							<li>
								<a href="#">Sub nav item #4.3 </a>
							</li>
						</ul>
					</li>
				
				</ul>
			</nav>
		</header>
	</div>
</body>
</html>
